<template>
    <div>
        <div class="box1">
            <div class="box1_1">
                <img src="../assets/OIP-C (1).jpg" alt="">
                <h2>可爱登</h2>
                <br>
                <span>超级管理员</span>
            </div>
            <hr>
            <div>
                <p>登录时间：{{ LatesTime }}</p>
                <br>
                <!-- <button @click="ck3('page1')">个人中心</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -->
                <button @click="ck1('about')">退出登录</button>
            </div>
        </div>
        <div class="box2">
            <div class="box2_1">
                <div class="box_1_1">
                    <i class="el-icon-success"></i>
                </div>
                <div class="box_1_2">
                    <span>￥1234</span>
                    <br>
                    <span>今日支付订单</span>
                </div>
            </div>
            <div class="box2_1">
                <div class="box_1_1">
                    <i class="el-icon-info"></i>
                </div>
                <div class="box_1_2">
                    <span>￥1800</span>
                    <br>
                    <span>今日未支付订单</span>
                </div>
            </div>
            <div class="box2_1">
                <div class="box_1_1">
                    <i class="el-icon-upload"></i>
                </div>
                <div class="box_1_2">
                    <span>￥230</span>
                    <br>
                    <span>本月收藏订单</span>
                </div>
            </div>
            <div class="box2_1">
                <div class="box_1_1">
                    <i class="el-icon-success"></i>
                </div>
                <div class="box_1_2">
                    <span>￥230</span>
                    <br>
                    <span>今日收藏订单</span>
                </div>
            </div>
            <div class="box2_1">
                <div class="box_1_1">
                    <i class="el-icon-info"></i>
                </div>
                <div class="box_1_2">
                    <span>￥1234</span>
                    <br>
                    <span>本月支付订单</span>
                </div>
            </div>
            <div class="box2_1">
                <div class="box_1_1">
                    <i class="el-icon-upload"></i>
                </div>
                <div class="box_1_2">
                    <span>￥1800</span>
                    <br>
                    <span>本月未支付订单</span>
                </div>
            </div>

        </div>
        <div class="fontdata">
            <el-card style="margin-top: 20px; height: 460px">
                <el-table :data="tableData">
                    <el-table-column v-for="(val, key) in tableLabel" :key="key" :prop="key" :label="val">
                    </el-table-column>
                </el-table>
            </el-card>
        </div>
        <div class="twofontdata">
            <el-card style="height: 280px">
                <div style="height: 280px" ref="echarts"></div>
            </el-card>
        </div>
        <br>
        <div class="graph">
            <el-card style="height: 230px" class="cart1">
                <div style="height: 200px" ref="userEcharts"></div>
            </el-card>
            <el-card style="height: 230px" class="cart2">
                <div style="height: 160px" ref="videoEcharts"></div>
            </el-card>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import { orderData, userData, videoData } from './qwer.js'
export default {
    data() {
        return {
            LatesTime: '',
            orderData,
            userData,
            videoData,
            tableData: [{
                name: 'oppo',
                todayBuy: 100,
                monthBuy: 300,
                totalBuy: 800
            },
            {
                name: 'vivo',
                todayBuy: 100,
                monthBuy: 300,
                totalBuy: 800
            },
            {
                name: '苹果',
                todayBuy: 100,
                monthBuy: 300,
                totalBuy: 800
            },
            {
                name: '小米',
                todayBuy: 100,
                monthBuy: 300,
                totalBuy: 800
            },
            {
                name: '三星',
                todayBuy: 100,
                monthBuy: 300,
                totalBuy: 800
            },
            {
                name: '魅族',
                todayBuy: 100,
                monthBuy: 300,
                totalBuy: 800
            }],
            tableLabel: {
                name: '课程',
                todayBuy: '今日购买',
                monthBuy: '本月购买',
                totalBuy: '总购买'
            },

        }
    },
    mounted() {
        this.GetDate()
        const order = this.orderData
        const xData = order.date
        const keyArray = Object.keys(order.data[0])
        const series = []
        keyArray.forEach(key => {
            series.push({
                name: key,
                data: order.data.map(item => item[key]),
                type: 'line'
            })
        });
        const option = {
            xAxis: {
                data: xData
            },
            yAxis: {},
            legend: {
                data: keyArray
            },
            series

        }
        const E = echarts.init(this.$refs.echarts)
        E.setOption(option)
        //用户柱状图
        const userOption = {
            legend: {
                textStyle: {
                    color: "#333",
                },
            },
            grid: {
                left: "20%",
            },
            //提示框
            tooltip: {
                trigger: "axis",
            },
            xAxis: {
                type: "category",//类目轴
                data: this.userData.map(item => item.date),
                axisLine: {
                    lineStyle: {
                        color: "#17b3a3",
                    },
                },
                axisLabel: {
                    interval: 0,
                    color: "#333",
                },
            },
            yAxis: [
                {
                    type: "value",
                    axisLine: {
                        lineStyle: {
                            color: "#17b3a3",
                        },
                    },
                },
            ],
            color: ["#2ec7c9", "#b6a2de"],
            series: [
                {
                    name: '新增用户',
                    data: this.userData.map(item => item.new),
                    type: 'bar'
                },
                {
                    name: '活跃用户',
                    data: this.userData.map(item => item.active),
                    type: 'bar'
                }
            ],
        }
        const U = echarts.init(this.$refs.userEcharts)
        U.setOption(userOption)
        //饼图
        const videoOption = {
            tooltip: {
                trigger: "item",
            },
            color: [
                "#0f78f4",
                "#dd536b",
                "#9462e5",
                "#a6a6a6",
                "#e1bb22",
                "#39c362",
                "#3ed1cf",
            ],
            series: [
                {
                    data: this.videoData,
                    type: 'pie'
                }
            ],
        }
        const v = echarts.init(this.$refs.videoEcharts)
        v.setOption(videoOption)
    },
    methods: {
        ck1(path1) {
            localStorage.removeItem('用户名')
            localStorage.removeItem('密码')
            this.$router.push({ name: path1 })
        },
        // ck3(path1) {
        //     this.$router.push({ name: path1 })
        // },
        // 获取现在时间
        GetDate() {
            //获取现在的时间
            var date = new Date();
            let y = date.getFullYear();//获取现在的年份
            let m = date.getMonth();//获取现在的月份
            let dates = date.getDate();//获取现在的号数
            let arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            let d = date.getDay();//算出星期几
            let h = date.getHours();//算出小时
            let min = date.getMinutes();//算出分钟
            this.LatesTime = y + '年' + (m + 1) + '月' + dates + '日' + h + '时' + min + '分' + arr[d];
            return this.LatesTime
        }
    },

}
</script>

<style lang="less" scoped>
.graph {
    width: 600px;
    height: 230px;
    // outline: 1px solid red;
    margin-left: 450px;
    display: flex;

    .cart1 {
        width: 300px;
    }

    .cart2 {
        width: 300px;
    }
}

.twofontdata {
    width: 600px;
    margin-left: 450px;
    margin-top: -462px;
}

.fontdata {
    width: 350px;
    margin-left: 40px;
}

.box1_1 {
    width: 350px;
    height: 180px;

    // 
    h2 {
        margin-top: -110px;
        margin-left: 100px;
    }

    span {
        margin-left: 100px;
    }
}

.box1_1>img {
    margin-left: -200px;
    margin-top: 30px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
}

.box1 {
    background-color: rgba(255, 255, 255, 0.34);
    border-radius: 10px;
    width: 350px;
    height: 260px;
    margin-left: 40px;
    outline: 1px solid white;
}

.box2 {
    margin-left: 450px;
    margin-top: -270px;
    width: 600px;
    height: 300px;
    // outline: 1px solid red;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    // align-content: stretch;

    .box2_1 {
        width: 240px;
        height: 80px;
        border-radius: 10px;
        background-color: rgba(255, 255, 255, 0.34);
        outline: 1px solid white;

        .box_1_1 {
            width: 80px;
            height: 80px;
            border-radius: 10px;
            background-color: rgba(53, 222, 222, 0.708);

            i {
                margin-top: 25px;
                font-size: 30px;
            }
        }

        .box_1_2 {
            margin-top: -65px;
            margin-left: 60px;
        }
    }
}
</style>